<template>
  <view class="tabs-wrap">
    <view :class="['tabs-item', curIdx === index ? 'active': '' ]" v-for="(item, index) of tabs" :key="index" @click="handleClick(index)">{{ item }}</view>
  </view>
</template>

<script lang="ts" setup>
  import { watchEffect } from 'vue';

  const curIdx = ref(0) as any;
  const tabs: any = [ '参加市委会活动', '承办市委会活动' ];

  const emit = defineEmits(['change']);

  //  监听 index 的变化，并发送请求
  watchEffect(() => {
    emit('change', curIdx.value);
  })

  //  监听点击事件、切换 tabs 下标
  const handleClick = (index: any) => {
    curIdx.value = index;
  }
</script>

<style lang="scss" scoped>
  .tabs-wrap {
    display: flex;
    width: 100%;

    .tabs-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 94rpx;
      border-bottom: 4rpx solid transparent;
      font-size: 32rpx;
      color: #999999;



      &.active {
        border-bottom: 4rpx solid #d38f59;
        color: #333333;
      }
    }
  }
</style>